<!--
 @Description 线上云展馆列表
 @author dumeng
 @date 2022/11/29
-->

<template>
  <section
    v-if="list.length >0"
    class="online-show-list-page"
    :style="{
      'padding-top': top || 0,
      'padding-bottom': paddingBottom || 0,
      'padding-left':spacing||0,
      'padding-right':spacing||0,
    }"
  >
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :immediate-check="false"
        :error.sync="error"
        :finished="finished"
        :finished-text="finishedText"
        loading-text="正在加载中..."
        error-text="请求失败，点击重新加载"
        @load="onLoad"
      >
        <ul>
          <li
            v-for="(item, i) in list"
            :key="i"
            class="list-item"
          >
            <newsListStyleThree
              v-if="item.showType == 'ZSXS_YWZTYS'"
              :item="item"
              :label-obj="labelObj"
              :option="option"
            />
            <!-- 大图 -->
            <newsListStyleSix
              v-else-if="item.showType == 'ZSXS_TWHPBTYS'"
              :item="item"
              :label-obj="labelObj"
              :option="option"
            />
            <newsListStyleOne v-else :item="item" :label-obj="labelObj" :option="option" />
          </li>
        </ul>
      </van-list>
    </van-pull-refresh>
  </section>
</template>
<script>
import mixins from './../mixins'
import LabelComp from '@/components/CustomPage/apps/widget/labelComp'
import newsListStyleOne from '../news/newsListStyleOne'
import newsListStyleThree from '../news/newsListStyleThree'
import newsListStyleSix from '../news/newsListStyleSix'

export default {
  name: 'OnlineShowListPage',
  inject: ['footerHeight'],
  components: {
    newsListStyleOne,
    newsListStyleThree,
    newsListStyleSix,
    LabelComp
  },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default() {
        return {}
      }
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      view: '/API-DOCUMENT/document/file/download?id=',
      total: 0,
      isNoData: false,
      isLoadError: false,
      error: false,
      loading: false, // 是否处于加载状态
      finished: false, // 是否已加载完所有数据
      isLoading: false, // 是否处于下拉刷新状态
      finishedText: '已经到底了',
      list: [],
      /** 接口参数 start */
      page: 1,
      /** 接口参数 end */
      labelObj: undefined
    }
  },
  async created() {
    if (this.isInitData) {
      this.labelObj = await this.getLabelList()
      await this.initData()
    } else {
      this.list = [
        {
          mainTitle: '标题',
          publishTime: '2022/3/10',
          url: 'http://beyond.3dnest.cn/play/?m=012d102a_qQiT_b6f9_2Ts',
          tag: 'VR展厅',
          type: '1',
          coverImgIdUrl: '1',
          coverImgId: '1'
        },
        {
          mainTitle: '标题',
          publishTime: '2022/3/10',
          url: 'https://cscec.chineseworkers.com.cn/#/broadcast/detail?i=bde4b4ed-9524-4306-a412-716015f80237&viewType=exhibitionCenter',
          tag: '视频展播',
          type: '2',
          coverImgIdUrl: '1',
          coverImgId: '1'
        }
      ],
      this.finished = false
      this.loading = false
      this.isLoading = false
    }
  },

  methods: {
    /**
     * 用于initData方法调用完设置数据
     */
    setData(result) {
      this.finished = false
      this.loading = false
      this.isLoading = false
      if (result !== 'error') {
        const { rows, total } = result?.dataList.data || {}
        this.list.push(...rows)
        this.setLabel(this.list, 'list')
        this.loading = false
        this.isLoading = false
        this.isNoData = total < 1
        if (this.isNoData) {
          this.finishedText = ''
        } else {
          this.finishedText = '已经到底了'
        }
        if (this.list.length >= total) {
          this.finished = true
        } else {
          this.finished = false
        }
      }
    },
    goPage(url) {
      return
      location.href = url
    },
    refresh4other() {
      return new Promise((resolve) => {
        this.finished = true
        this.page = 1
        this.list = []
        resolve()
      })
    },
    onRefresh() {
      if (!this.isInitData) {
        return
      }
      this.finished = false
      this.page = 1
      this.list = []
      this.getDataByCode('dataList')
    },

    onLoad() {
      if (!this.isInitData) {
        this.finished = false
        this.loading = false
        this.isLoading = false
        return
      }
      if (!this.isLoading) {
        this.page += 1
        this.getDataByCode('dataList')
      } else {
        this.loading = false
      }
    }
  }
}
</script>
<style lang="scss">
@import "@/styles/utility/rem.scss";

.online-show-list-page {
  position: relative;

  .van-pull-refresh {

    ul {
      padding-top: rem(20);

      .list-item {
        margin-bottom: rem(20);
        position: relative;
        background-color: #fff;

        .news-list-style-one {
          border-radius: rem(12);
        }

        .news-list-style-three {
          border-radius: rem(12);
        }

        .news-list-style-six {
          border-radius: rem(12);
        }

        /*   overflow: hidden;
           background-color: #fff;
           display: flex;
           align-items: center;
           box-sizing: border-box;
           padding: rem(30);

           &:first-child {
             border-radius: rem(16) rem(16) 0 0;
           }
           &:last-child {
             border-radius: 0 0 rem(16) rem(16);
             &::after {
               height: 0;
             }
           }*/
        /*  &::after {
            content: "";
            height: 1px;
            background-color: #f1f1f1;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
          }*/
      }
    }
  }
}
</style>
